<template>
  <section class="pop-message"
    v-show="isShow">
    <div class="box-message">
      <div class="text-center">{{ content }}</div>
      <div class="text-center"
        v-show="icons.length"
        style="margin-top: 12px;">
        <div class="message-icon"
          :class="[selectIndex === index && 'active', 'item-' + icon.image]"
          v-for="(icon, index) in icons" :key="index"
          @click="handleSelect(index)"></div>
      </div>
      <div class="text-center" style="margin-top: 12px;">
        <button class="primary-button"
          @click="handleConfirm()">{{ confirmBtnText || '确定' }}</button>
        <button class="default-button"
          style="margin-left: 12px;"
          v-show="cancelBtnText"
          @click="handleCancel()">{{ cancelBtnText || '取消' }}</button>
      </div>
    </div>
  </section>
</template>

<script>
import eventBus from '@/EventBus'

let msgQueue = []

export default {
  data () {
    return {
      isShow: false,
      confirmBtnText: '',
      cancelBtnText: '', // use cancelBtnText content to control its' display
      content: '',
      icons: [],
      selectable: false,
      selectIndex: -1,
      tag: ''
    }
  },

  mounted () {
    eventBus.$on('notifyMessage', (params) => {
      // params = {
      //   message: '',
      //   icons: [{}, {}, ...],
      //   selectable: false,
      //   confirmBtnText: '',
      //   cancelBtnText: '',
      //   tag: <any>,
      // }
      console.log('message', params)
      if (this.isShow) {
        msgQueue.push(params)
      } else {
        this.showMessage(params)
      }
    })
  },

  beforeDestroy () {
    eventBus.$off('notifyMessage')
  },

  methods: {
    showMessage ({ message, confirmBtnText, cancelBtnText, icons, tag, selectable = false }) {
      this.content = message || ''
      this.icons = icons || []
      this.confirmBtnText = confirmBtnText || ''
      this.cancelBtnText = cancelBtnText || ''
      this.tag = tag
      this.selectable = selectable || false
      this.isShow = true
    },
    handleSelect (index) {
      if (this.selectable) {
        this.selectIndex = index
      }
    },
    handleConfirm () {
      if (this.selectable && this.selectIndex === -1) {
        return
      }
      eventBus.$emit('notifyMessageAction', {
        action: 'confirm',
        index: this.selectIndex,
        tag: this.tag
      })
      if (this.tag && this.tag.source === 'restart') {
        // restart, should clear dirty message queue
        msgQueue = []
      }
      this.close()
    },
    handleCancel () {
      eventBus.$emit('notifyMessageAction', {
        action: 'cancel',
        index: this.selectIndex,
        tag: this.tag
      })
      this.close()
    },
    close () {
      this.isShow = false
      this.confirmBtnText = ''
      this.cancelBtnText = ''
      this.content = ''
      this.icons = []
      this.selectable = false
      this.selectIndex = -1
      this.tag = ''
      if (msgQueue.length) {
        const params = msgQueue.shift()
        this.showMessage(params)
      }
    }
  }
}
</script>

<style scoped lang="less">
.pop-message {
  position: absolute;
  z-index: 49;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  .box-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    min-width: 400px;
    padding: 18px;
    border: 6px solid red;
    border-radius: 12px;
    background: #343434;
    color: #fff;
    font-size: 28px;
    .message-icon {
      width: 100px;
      height: 100px;
      border: 6px solid #eee;
      border-radius: 8px;
      transition: all 0.3s;
      &:not(:last-of-type) {
        margin-right: 12px;
      }
      &.active {
        border: 6px solid red;
      }
    }
  }
}
</style>
